<template>
  <div>
    <div class="box1">
      <span class="pic">
        <img
          :src="'http://120.48.37.120:9000/parttime/' + company.companypic"
          alt=""
        />
      </span>
      <span class="companyname">{{ company.companyname }}</span>
      <span class="editbtn">
          <el-button type="primary" @click="showEditDialog">修改企业信息</el-button>
          <el-button type="primary" @click="showpwdEditDialog">修改密码</el-button>
      </span>
    </div>
    <div class="box2">
      <el-descriptions title="企业信息">
        <el-descriptions-item label="企业编号">{{
          company.companyid
        }}</el-descriptions-item>
        <el-descriptions-item label="企业负责人">{{
          company.principal
        }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{
          company.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          company.email
        }}</el-descriptions-item>
        <el-descriptions-item label="企业优势">
          <el-tag size="small">{{ company.comadvantage }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址"
          >{{company.placename}}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <!--修改用户的对话框  -->
    <el-dialog title="修改企业信息" :visible.sync="editDialogVisible" width="50%">
      <el-form
        :model="company"
        :rules="companyRules"
        ref="companyRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上传图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :auto-upload="autoUpload"
            name="imgFile"
            :show-file-list="false"
            :on-success="edithandleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="公司名" prop="companyname">
          <el-input v-model="company.companyname"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="principal">
          <el-input v-model="company.principal"></el-input>
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="company.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="company.phone"></el-input>
        </el-form-item>
        <el-form-item label="工作地点" prop="placename">
          <el-cascader
            expand-trigger="hover"
            :options="workplace"
            :props="workplaceProps"
            v-model="company.placeids"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="公司优势" prop="comadvantage">
          <el-input v-model="company.comadvantage"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" prop="profile">
          <el-input type="textarea"
            placeholder="请输入内容"
            maxlength="300"
            show-word-limit
            v-model="company.profile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editcompanyInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="editpwdDialogVisible"
      width="30%"
      @close="editPwdDialogClosed"
    >
      <el-form ref="editpwdRef" :rules="editPwdRules" :model="password">
        <el-form-item label="旧密码" prop="pwd1">
          <el-input
            placeholder="请输入密码"
            v-model="password.pwd1"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd2">
          <el-input
            placeholder="请输入密码"
            v-model="password.pwd2"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="再次输入" prop="pwd3">
          <el-input
            placeholder="请输入密码"
            v-model="password.pwd3"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editpwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editpwd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    
  data() {
      //验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
    //验证第二次输入的新密码
    var checkPwd3 = (rule, value, cb) => {
      const regPwd3 = this.password.pwd2
      if (regPwd3 == value) {
        return cb()
      }
      cb(new Error('请输入相同新密码'))
    }
    return {
      autoUpload: true, //自动上传
      imageUrl: '', //模型数据，用于上传图片完成后图片预览
      // 上传图片的URL地址
      uploadURL: 'http://localhost:8787/yonghu/upload',
      user: {},
      company: {},
      workplace: [],//工作地点
      editDialogVisible:false,//修改企业对话框
      editpwdDialogVisible: false, //修改密码对话框
      companyRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' },
        ],
        
      },
      editPwdRules: {
        pwd2: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 10,
            message: '密码的长度在6~15位之间',
            trigger: 'blur',
          },
        ],
        pwd3: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPwd3, trigger: 'blur' },
        ],
      },
      password: {
        companyid: '',
        pwd1: '',
        pwd2: '',
        pwd3: '',
      },
      workplaceProps: {
        label: 'placename',
        value: 'id',
        children: 'children',
      },
    }
  },
  created() {
    this.getCompanyById()
    this.getWorkplaceList()
  },
  methods: {
    // 获取所有工作地点分类数据
    async getWorkplaceList() {
      const { data: res } = await this.$http.get('workplace')

      if (res.meta.status !== 200) {
        return this.$message.error('获取工作地点数据失败')
      }
      this.workplace = res.data
    },
    //获取企业信息
    async getCompanyById() {
      this.user = JSON.parse(window.sessionStorage.getItem('user'))
      console.log(this.user.actorid);
      const { data: res } = await this.$http.get('company/' + this.user.actorid)
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.company = res.data
      this.imageUrl='http://120.48.37.120:9000/parttime/' + this.company.companypic
      console.log(this.company)
    },
    //修改企业信息
     showEditDialog() {
      this.editDialogVisible = true
    },
    //图片上传成功
    edithandleAvatarSuccess(response, file) {
      //为模型数据imageUrl赋值 用于图片预览
      this.imageUrl = 'http://120.48.37.120:9000/parttime/' + response.data
      if (response.meta.status != 200) {
        this.$message.error('上传图片失败')
      }
      this.$message.success('上传图片成功')
      //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
      this.company.companypic = response.data
    },
    //上传图片之前执行
    beforeAvatarUpload(file) {
      const isLt200M = file.size / 1024 / 1024 < 200
      if (!isLt200M) {
        this.$message.error('上传套餐图片大小不能超过 200MB!')
      }
      return isLt200M
    },
    //修改企业
    async editcompanyInfo(){
        const { data: res } = await this.$http.put('company/' + this.user.actorid,this.company)
        if (res.meta.status!=200) return this.$message.error(res.meta.msg)
        this.editDialogVisible=false
        this.getCompanyById()
        this.$message.success(res.meta.msg)
        
    },
    //修改密码对话框
    async showpwdEditDialog(){
        this.editpwdDialogVisible=true

    },
    editPwdDialogClosed() {
      this.$refs.editpwdRef.resetFields()
    },
    //修改密码
    async editpwd(){
        this.password.companyid = this.company.companyid
        this.$refs.editpwdRef.validate(async (valid) => {
          if (!valid) return
          //发起请求
          const { data: res } = await this.$http.get('updateCompanyPwd', {
            params: this.password,
          })
          if (res.meta.status != 200) {
            return this.$message.error(res.meta.msg)
          }
          this.editpwdDialogVisible = false
          this.getCompanyById()
          this.$message.success(res.meta.msg)
        })

    }
  },
}
</script>

<style lang="less" scoped>
.box1 {
  width: 100%;
  height: 205px;
  .pic {
    display: block;
    width: 120px;
    height: 140px;
    float: left;
    img {
      width: 100%;
      height: 100%;
    }
    margin: 20px;
  }
  .editbtn{
    display: block;
    float: left;
    margin-top:60px ;
  }
  .companyname {
    width: 40%;
    height: 140px;
    line-height: 100px;
    font-size: 25px;
    font-weight: 700;
    margin: 13px;
    display: block;
    float: left;
  }
}
</style>